body {
    margin: 0;
    background: white;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
}

#artwork {
    width: 600px;
    height: 394px;
    background-color: #d9e7ec;
    position: relative;
    overflow: hidden;
}

.rect {
    position: absolute;
}


.lilac { background-color: #d3bfdc; }
.bluebig { background-color: #9fc6d6; }
.white { background-color: #edf1f3; }
.blue { background-color: #89a7d3; }
.blue2 { background-color: #9fc7d8; }
.peach { background-color: #e8c2a5; }
.yellow { background-color: #efb64f; }


.tall1 {
    width: 62px;
    height: 104px;
    left: 41px;
    top: 0;
}

.top-mid {
    width: 153px;
    height: 146px;
    left: 145px;
    top: 0;
}

.top-right-white {
    width: 137px;
    height: 129px;
    left: 298px;
    top: 0;
}

.right-top {
    width: 117px;
    height: 117px;
    left: 435px;
    top: 0;
}

.left-mid {
    width: 91px;
    height: 125px;
    left: 1px;
    top: 153px;
}

.small-mid-left {
    width: 59px;
    height: 61px;
    left: 146px;
    top: 186px;
}

.center {
    width: 152px;
    height: 118px;
    left: 247px;
    top: 127px;
}

.right-mid-small {
    width: 55px;
    height: 113px;
    left: 578px;
    top: 153px;
}

.bottom-mid-right {
    width: 151px;
    height: 148px;
    left: 341px;
    top: 194px;
}

.bottom-left {
    width: 89px;
    height: 61px;
    left: 44px;
    top: 309px;
}

.bottom-center {
    width: 56px;
    height: 113px;
    left: 229px;
    top: 281px;
}

.bottom-right {
    width: 84px;
    height: 87px;
    left: 466px;
    top: 307px;
}